<template>
	<div class="boxmain">
		<h3>上线信息<el-button type="primary" @click="submitfenshu">提交上线信息</el-button></h3> 
		<div class="chooseschool">
			<div style="margin-right:30px;">
				选择查看学校
				<el-select v-model="searchschool" clearable placeholder="全部" @change="schoolintp">
					<el-option
					  key="全部"
					  label="全部"
					  value="全部">
					</el-option>
				  <el-option
				    v-for="item in schoolselect"
				    :key="item.gradeId"
				    :label="item.schoolName"
				    :value="item.gradeId">
				  </el-option>
				</el-select>
			</div>
			<div>
				选择查看方向
				<el-select v-model="xkfangxiang" placeholder="" @change="xkfangchange">
				  <el-option
				  v-if="titlecontent.type3==0"
				    v-for="item in xkfx2"
				    :key="item.id"
				    :label="item.name"
				    :value="item.id">
				  </el-option>
				  <el-option
				  v-if="titlecontent.type3==3||titlecontent.type3==1"
				    v-for="item in xkfx1"
				    :key="item.id"
				    :label="item.name"
				    :value="item.id">
				  </el-option>
				  <el-option
				  v-if="titlecontent.type3==2"
				    v-for="item in xkfx3"
				    :key="item.id"
				    :label="item.name"
				    :value="item.id">
				  </el-option>
				</el-select>
			</div>
		</div>
		<el-table
		    :data="tableData"
		    :height="tableheight"
		    border
			 :row-class-name="tableRowClassName"
			 :key="xkfangxiang"
		    style="width: 100%">
		    <el-table-column
		      prop="schoolName"
		      label="考试学校"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="examNum"
		      label="参考人数"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      label="历史一本人数" v-if="xkfangxiang==4">
			  <template slot-scope="scope">
				  <el-input v-model="scope.row.wknum1" @input="scope.row.wknum1 = $event.replace(/[^0-9]/g, '')">{{scope.row.wknum1}}</el-input>
			  </template>
		    </el-table-column>
			<el-table-column
			  prop="wknum1Rate"
			  label="所占比例" v-if="xkfangxiang==4">
			</el-table-column>
			<el-table-column
			  label="历史二本人数" v-if="xkfangxiang==4">
			  <template slot-scope="scope">
			  		<el-input v-model="scope.row.wknum2" @input="scope.row.wknum2 = $event.replace(/[^0-9]/g, '')">{{scope.row.wknum2}}</el-input>
			  </template>
			</el-table-column>
			<el-table-column
			  prop="wknum2Rate"
			  label="所占比例" v-if="xkfangxiang==4">
			</el-table-column>
			<el-table-column
			  label="物理一本人数" v-if="xkfangxiang==5">
			  <template slot-scope="scope">
			  		<el-input v-model="scope.row.lknum1" @input="scope.row.lknum1 = $event.replace(/[^0-9]/g, '')">{{scope.row.lknum1}}</el-input>
			  </template>
			</el-table-column>
			<el-table-column
			  prop="lknum1Rate"
			  label="所占比例" v-if="xkfangxiang==5">
			</el-table-column>
			<el-table-column
			  label="物理二本人数" v-if="xkfangxiang==5">
			  <template slot-scope="scope">
			  		<el-input v-model="scope.row.lknum2" @input="scope.row.lknum2 = $event.replace(/[^0-9]/g, '')">{{scope.row.lknum2}}</el-input>
			  </template>
			</el-table-column>
			<el-table-column
			  prop="lknum2Rate"
			  label="所占比例" v-if="xkfangxiang==5">
			</el-table-column>
			<el-table-column
			  prop="wknum1"
			  label="一本人数" v-if="xkfangxiang==0">
			  <template slot-scope="scope">
			  		<el-input v-model="scope.row.wknum1" @input="scope.row.wknum1 = $event.replace(/[^0-9]/g, '')">{{scope.row.wknum1}}</el-input>
			  </template>
			</el-table-column>
			<el-table-column
			  prop="wknum1Rate"
			  label="所占比例" v-if="xkfangxiang==0">
			</el-table-column>
			<el-table-column
			  label="二本人数" v-if="xkfangxiang==0">
			  <template slot-scope="scope">
			  		<el-input v-model="scope.row.wknum2" @input="scope.row.wknum2 = $event.replace(/[^0-9]/g, '')">{{scope.row.wknum2}}</el-input>
			  </template>
			</el-table-column>
			<el-table-column
			  prop="wknum2Rate"
			  label="所占比例" v-if="xkfangxiang==0">
			</el-table-column>
			<el-table-column
			  label="文科一本人数" v-if="xkfangxiang==1">
			  <template slot-scope="scope">
			  		<el-input v-model="scope.row.wknum1" @input="scope.row.wknum1 = $event.replace(/[^0-9]/g, '')">{{scope.row.wknum1}}</el-input>
			  </template>
			</el-table-column>
			<el-table-column
			  prop="wknum1Rate"
			  label="所占比例" v-if="xkfangxiang==1">
			</el-table-column>
			<el-table-column
			  label="文科二本人数" v-if="xkfangxiang==1">
			  <template slot-scope="scope">
			  		<el-input v-model="scope.row.wknum2" @input="scope.row.wknum2 = $event.replace(/[^0-9]/g, '')">{{scope.row.wknum2}}</el-input>
			  </template>
			</el-table-column>
			<el-table-column
			  prop="wknum2Rate"
			  label="所占比例" v-if="xkfangxiang==1">
			</el-table-column>
			<el-table-column
			  label="理科一本人数" v-if="xkfangxiang==2">
			  <template slot-scope="scope">
			  		<el-input v-model="scope.row.lknum1" @input="scope.row.lknum1 = $event.replace(/[^0-9]/g, '')">{{scope.row.lknum1}}</el-input>
			  </template>
			</el-table-column>
			<el-table-column
			  prop="lknum1Rate"
			  label="所占比例" v-if="xkfangxiang==2">
			</el-table-column>
			<el-table-column
			  label="理科二本人数" v-if="xkfangxiang==2">
			  <template slot-scope="scope">
			  		<el-input v-model="scope.row.lknum2" @input="scope.row.lknum2 = $event.replace(/[^0-9]/g, '')">{{scope.row.lknum2}}</el-input>
			  </template>
			</el-table-column>
			<el-table-column
			  prop="lknum2Rate"
			  label="所占比例" v-if="xkfangxiang==2">
			</el-table-column>
		  </el-table>
		<!-- 修改/添加学生信息 -->
		<div class="addExamMain" v-if="addstudentIshow">
			<div class="addExamContent">
				<h3>修改/添加学生信息</h3>
				<ul>
					<li>
						<span>学号</span>
						<el-input v-model="studentinfo.xuehao" placeholder="请输入内容"></el-input>
					</li>
					<li>
						<span>准考证号</span>
						<el-input v-model="studentinfo.zhunkaozhenghao" placeholder="请输入内容"></el-input>
					</li>
					<li>
						<span>姓名</span>
						<el-input v-model="studentinfo.name" placeholder="请输入内容"></el-input>
					</li>
					<li>
						<span>选科1</span>
						<el-select v-model="studentinfo.xuanke1" placeholder="请选择">
						  <el-option
						    v-for="item in options"
						    :key="item.value"
						    :label="item.label"
						    :value="item.value">
						  </el-option>
						</el-select>
					</li>
					<li>
						<span>选科2</span>
						<el-select v-model="studentinfo.xuanke2" placeholder="请选择">
						  <el-option
						    v-for="item in options"
						    :key="item.value"
						    :label="item.label"
						    :value="item.value">
						  </el-option>
						</el-select>
					</li>
					<li>
						<span>选科3</span>
						<el-select v-model="studentinfo.xuanke3" placeholder="请选择">
						  <el-option
						    v-for="item in options"
						    :key="item.value"
						    :label="item.label"
						    :value="item.value">
						  </el-option>
						</el-select>
					</li>
					<li>
						<span>小语种</span>
						<el-select v-model="studentinfo.xiaoyuzhong" placeholder="请选择">
						  <el-option
						    v-for="item in options"
						    :key="item.value"
						    :label="item.label"
						    :value="item.value">
						  </el-option>
						</el-select>
					</li>
				</ul>
				<div class="groupbutton">
					<el-button type="primary">保存</el-button>
					<el-button type="primary" @click="addstudentIshow=false">返回</el-button> 
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {onlineinfoList,groupExamList,onlineupdate} from '../../../api/scoreapi.js'
	export default{
		data(){
			return{
				searchschool:'全部',
				xkfangxiang:0,
				tableData: [],
				xkfx1:[
					{
						id:0,
						name:'不区分'
					}
				],
				xkfx2:[
					{
						id:0,
						name:'不区分'
					},
					{
						id:1,
						name:'文科'
					},
					{
						id:2,
						name:'理科'
					}
				],
				xkfx3:[
					{
						id:5,
						name:'物理'
					},
					{
						id:4,
						name:'历史'
					}
				],
				tableheight:'',
				addstudentIshow:false,
				studentinfo:{
					xuehao:'',
					zhunkaozhenghao:'',
					name:'',
					xuanke1:'',
					xuanke2:'',
					xuanke4:'',
					xiaoyuzhong:''
				},
				titlecontent:{}
			}
		},
		mounted() {
			// 在组件挂载后获取屏幕高度
			this.getScreenHeight();
			//在窗口大小变化时更新屏幕高度，可以监听window的resize事件
			window.addEventListener('resize', this.getScreenHeight);
			let newtitle = decodeURIComponent(this.$route.query.con)
			this.titlecontent = JSON.parse(newtitle)
			this.schoolclick(JSON.parse(this.$route.query.con).n5Id)
			this.onlineinfoListcontent()
			localStorage.setItem('menuState', 2);
			if(this.titlecontent.type3==0||this.titlecontent.type3==3||this.titlecontent.type3==1){
				this.xkfangxiang = 0
			}else if(this.titlecontent.type3==2){
				this.xkfangxiang = 5
			}
		},
		methods: {
		    getScreenHeight() {
		      // 获取屏幕高度并更新data中的screenHeight
		      this.tableheight = parseInt(window.innerHeight-400);
		    },
			//创建学校
			addstudent(){
				this.addstudentIshow = true
			},
			//修改学校
			fixedstudent(con){
				this.addstudentIshow = true
			},
			//删除学校
			deletestudent(con){
				
			},
			//table各色换行
			tableRowClassName({row, rowIndex}) {
				return rowIndex % 2 === 0 ? 'warning-row' : 'success-row'
			},
			// 获取学校列表
			schoolclick(id){
				let params={navId:id}
				groupExamList(params).then(res=>{
					if(res.code==0){
						this.schoolselect = res.data
						if(this.searchschool!=''||this.searchschool!='全部'){
							this.schoolData = res.data.filter((item)=>item.schoolName==this.searchschool)
						}
					}else{
						this.$message({
							type: 'error',
							message: res.msg
						}); 
					}
				})
			},
			//获取上线信息
			onlineinfoListcontent(){
				let params={
					navId:this.titlecontent.n5Id,
					type4:this.xkfangxiang?[this.xkfangxiang]:undefined,
					groupId:this.searchschool=='全部'||this.searchschool==''?undefined:this.searchschool
				}
				onlineinfoList(params).then(res=>{
					if(res.code==0){
						this.tableData = res.data
					}else{
						this.$message({
							type: 'error',
							message: res.msg
						}); 
					}
				})
			},
			xkfangchange(val){
				this.onlineinfoListcontent()
			},
			schoolintp(){
				this.onlineinfoListcontent()
			},
			submitfenshu(){
				let result = this.tableData.map(({ gradeId, wknum1, wknum2, lknum1, lknum2 }) => ({
				  gradeId,
				  wknum1,
				  wknum2,
				  lknum1,
				  lknum2
				}))
				console.info(result)
				let params={
					lineNumList:result
				}
				onlineupdate(params).then(res=>{
					if(res.code==0){
						this.onlineinfoListcontent()
						this.$message({
							type: 'success',
							message: '修改成功'
						}); 
					}else{
						this.$message({
							type: 'error',
							message: res.msg
						}); 
					}
				})
			}
		},
		beforeDestroy() {
			// 在组件销毁前移除事件监听器，避免内存泄漏
			window.removeEventListener('resize', this.getScreenHeight);
		},
	}
</script>

<style scoped>
	.boxmain h3{
		padding:0 0 20px;
		font-size:18px;
		display: flex;
		justify-content: space-between;
	}
	.boxmain h3 >>> .el-button{
		background:#165DFF
	}
	.boxmain{
		padding:30px;
	}
	.addstudent{
		display: flex;
		justify-content: space-between;
		padding-bottom:15px;
		font-size:18px;
		font-weight:bold;
	}
	.addstudent b{
		font-weight:normal;
		color:#1664FF;
		cursor: pointer;
		font-size:14px;   
	}
	.chooseschool{
		margin-bottom:15px;
		display: flex;
		align-items: center;
	}
	.chooseschool >>> .el-select{
		margin-left:10px;
	}
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:1;
	}
	.addExamContent{
		width: 600px;
		height: 600px;
		position: fixed;
		background:#fff;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
	}
	.addExamContent h3{
		font-size:18px;
		padding:10px 0 30px;
	}
	.addExamContent ul li{
		display: flex;
		align-items: center;
		padding-bottom:15px;
	}
	.addExamContent ul li span{
		font-size:16px;
		display: flex;
		align-items: center;
		width:100px;
		justify-content: left;
	}
	.addExamContent ul li span i{
		font-style:normal;
		color:red;
		padding-left:5px;
	}
	.addExamContent ul li p{
		position: relative;
	}
	.addExamContent ul li p em{
		position: absolute;
		right:10px;
		top:50%;
		transform: translateY(-50%);
		color:#C0C4CC;
		cursor: pointer;
	}
	.addExamContent ul li >>> .el-input,.addExamContent ul li >>> .el-textarea{
		width:350px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:30px;
	}
	.groupbutton >>> .el-button{
		background:#165DFF;
		width:100px;
		margin-right:20px;
	}
	.boxmain >>> .el-table .warning-row {
	    background: rgb(243, 247, 255);
	}
	.boxmain >>> .el-table .success-row {
	    background:#fff;
	}
	.boxmain >>> .el-table .el-table__header-wrapper thead th {
	  background-color:rgb(220, 231, 255); /* 设置你想要的背景颜色 */
	  color: #000000; /* 设置你想要的文字颜色 */
	}
</style>